<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<title>移动端</title>
		<style>
		
			@media screen and (min-width:375px) {
				html{
					font-size: 50px;
				}
			}
			@media screen and (min-width:390px) {
				html{
					font-size: 52px;
				}
			}
			@media screen and (min-width:750px){
				html{
					font-size: 100px;
				}
			}
			
			
			
			
			
			.box{
				width: 2rem;
				height: 2rem;
				background-color: #f00;
			}
		</style>
	</head>
	<body>
		
		<div class="box">sssssssssss</div>
		<input type="radio">
		
		
		
		
		
		<!-- 
		 移动端
		 	一.移动端 布局方案  
		 	 1.单独开发
		 		移动端一套代码  PC端一套代码  rem布局
				移动端 识别设备 然后 跳转到专门的页面
				比较灵活,缺点 需要两套代码
		 	 2.响应式  
		 		只有一套代码 随着设备的尺寸变化  会响应页面 展示不同的样子
				Bootstrap框架
				简单方便 ,不够灵活,适用于布局简单的页面,影响SEO	
			二.移动端的问题--
				① 分辨率不同  屏幕尺寸不同  
				② 移动端调试方法不同
				③ 事件的变化  如何测试检查  通过 on添加的touch  在谷歌上无效 需要addeventListener 
				④ 视口  布局视口  视觉视口  理想视口
				物理像素 逻辑像素  物理像素比  倍图
				 
				浏览器 视口默认980     
				<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		 								 视口宽度等于设备宽度		初始缩放比例    最小缩放比例      最大缩放比例          用户是否缩放     文档是如何填充满屏幕的。 
										
				⑤ 移动端适配   让web页面适应各个移动端设配，让网页能完美的显示
				
				媒体查询
				@media screen and (min-width:375px) {
					html{
						font-size: 50px;
					}
				}
				@media screen and (min-width:414px) {
					html{
						font-size:55.2px;
					}
				}
				@media screen and (min-width:750px) {
					html{
						font-size: 100px;
					}
				}
				
				px   虚拟的像素
				%   1 相对于父级大小   2绝对定位 相对定位父级 3 固定定位相对浏览器窗口
				em    相对与父级的font-size
				rem   html font-size
				vw     1% 视口宽度
				vh      1% 视口高度
			
		 	
		 	三.移动端布局  
				①rem布局 + 百分比布局 +flex布局 
				②响应式布局   bootstarp      
				
				两个的区别
			
			四.移动端项目准备		
		 	
				① normalize  
					https://necolas.github.io/normalize.css/
				② PS +  Cutterman  切图神器
				③ viewport
				④ 媒体查询
		 
		 	 
		   
		 	 
		 	 前端css网站合集
		 	 https://ui.glass/generator/
		 	 
		 	 https://markodenic.com/tools/buttons-generator/
		 	 
		 	 https://neumorphism.io/
		 	 
		 	 https://uiverse.io/
		 	 
		 	 http://csslayout.io
		 	 
		 	 100天成为css大神
		 	 网站：https://100dayscss.com/leaderboard/
		 	 
		 	 Flex布局小游戏
		 	 地址：https://flexboxfroggy.com/
		 
		 
		 
		 
		 
		 
		 
		 -->
	</body>
</html>